<template>
  <div class="app-container">

    <div class="summary-cards">
      <div class="card overdue-30-days" @click="getSbList(0)">
        <p>未开始任务</p>
        <h2>{{ mainCounst[1].num }}</h2>
      </div>
      <div class="card in-progress-count" @click="getSbList(2)">
        <p>已过期任务</p>
        <h2>{{ mainCounst[2].num }}</h2>
      </div>
      <div class="card planned-count" @click="getSbList(1)">
        <p>已保养任务</p>
        <h2>{{ mainCounst[0].num }}</h2>
      </div>

    </div>

    <div class="filter-section">
        保养ID:<input style="width: 135px;" v-model="formDataOn.maintenanceId" type="text"  placeholder="保养ID" />
        保养人员:<input style="width: 160px;" v-model="formDataOn.userId" type="text"  placeholder="保养人员" />
        保养点:<input style="width: 160px;"  v-model="formDataOn.maintenancePoint"  type="text"  placeholder="保养点" />
        保养项:<input style="width: 135px;" v-model="formDataOn.maintenanceItem"  type="text"  placeholder="保养项" />
    </div>
    <div class="filter-section">
        设定值:<input style="width:  155px;" v-model="formDataOn.setValue"   type="text"  placeholder="设定值" />
        保养周期:<input style="width: 155px;" v-model="formDataOn.name" type="text"  placeholder="保养周期" />
       <!-- <el-date-picker
  v-model="formDataOn.time"
  type="datetime"
  value-format="yyyy-MM-dd HH:mm:ss"
  placeholder="选择保养时间"
  style="width: 155px; margin-left: 8px;"
/> -->
          <button @click="getSbList()">搜索</button>
          <button @click="handleExport">导出</button>
          <button @click="handleReset">重置</button>
          <!-- <button >重置</button> -->
    </div>




    <el-table :data="tableData"  :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}" style="width: 100%;" border>
      <el-table-column type="index" label="#" width="50"></el-table-column>
      <el-table-column prop="maintenanceId" label="保养ID" width="155"></el-table-column>
      <el-table-column prop="userId" label="保养人员" width="150"></el-table-column>
      <el-table-column prop="maintenancePoint" label="保养点" width="200"></el-table-column>  
      <el-table-column prop="maintenanceItem" label="保养项" width="500"></el-table-column>  
      <el-table-column prop="setValue" label="设定值" width="300"></el-table-column>  
      <el-table-column prop="name" label="保养周期" width="155"></el-table-column>
      <el-table-column prop="createTime" label="完成/过期时间" width="155"></el-table-column>
      <el-table-column prop="time" label="保养时间" width="155"></el-table-column>
      <!-- <el-table-column label="操作" width="100">
        <template #default="scope">
          <button @click="edit(scope.row)" class="btn-action">编辑</button>
        </template>
      </el-table-column>   -->
    </el-table>


  <p class="no-data" v-if="tableData.length === 0">暂无数据</p>

         <pagination
          v-if="showSb"
          :total="totalOn"
          :page.sync="formDataOn.pageNum"
          :limit.sync="formDataOn.pageSize"
          @pagination="getSbList"
        />

  </div>
</template>

<script>
import {listStatic,listMcount} from "@/api/wushui/maintenance";

export default {
  data() {
    return {
      mainCounst:[{num:0},{num:0},{num:0}],
      totalOn:0,
      showSb:true,
      maintenanceStatus:'',
      formDataOn:{
        maintenanceStatus:'',
        pageNum: 1,
        pageSize: 10
      },
      searchQuery: "",
      dateRange: [],
      selectedStatus: "",
      tableData: [

      ],
    };
  },
  mounted(){
    this.getSbList(0);
    this.getMcount();
  },
  computed: {

  },
  methods: {
      handleReset() {
        this.formDataOn = {
          pageNum: 1,
          pageSize: 10,
          maintenanceId: '',
          userId: '',
          maintenancePoint: '',
          maintenanceItem: '',
          setValue: '',
          name: '',
          time: null
        }
        this.formDataOn.maintenanceStatus=this.maintenanceStatus;
      this.getSbList()
    },

      /** 导出按钮操作 */
    handleExport() {
      this.download('maintenance/export', {
        ...this.formDataOn
      }, `role_${new Date().getTime()}.xlsx`)
    },

      getMcount(){
        listMcount().then((response) => {
          this.mainCounst=response.rows;
        console.log(this.mainCounst[0].num)
        console.log(this.mainCounst[1].num)
        console.log(this.mainCounst[2].num)

        })
     },
    getSbList(id){
        if(id==0){this.formDataOn.maintenanceStatus="0"; this.maintenanceStatus="0";}
        else if(id==1){this.formDataOn.maintenanceStatus='1';this.maintenanceStatus="1";
        }else if(id==2){ this.formDataOn.maintenanceStatus='2';this.maintenanceStatus="2";
        }
        console.log(this.formDataOn)
          listStatic(this.formDataOn).then((response) => {
            this.tableData=response.rows;
            this.totalOn=response.total;
          }).catch(() => {
            this.$message.error("获取数据失败");
          });
    },

    search() {
      console.log("执行搜索，条件如下：");
      console.log("搜索内容:", this.searchQuery);
      console.log("日期范围:", this.dateRange);
      console.log("保养状态:", this.selectedStatus);
    },
    edit(row) {
      console.log("编辑记录:", row);
      // 可扩展为弹出编辑模态框或跳转编辑页面
      alert(`编辑保养单号：${row.maintenanceOrder}`);
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f8f9fa;
  font-family: Arial, sans-serif;
}

.summary-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card {
  flex: 1;
  padding: 20px;
  margin: 0 10px;
  text-align: center;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.card p {
  margin: 0;
  margin-bottom: 10px;
}
.card h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}
.planned-count {
  background-color: #63c289;
}
.overdue-30-days {
  background-color: #87cefa;
}
.in-progress-count {
  background-color: #f08080;
}

.filter-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
input,
select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
  flex: 1;
}

.status-select {
  width: 120px;
  margin-right: 10px;
}

.btn-search {
  padding: 8px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-search:hover {
  background-color: #0056b3;
}

.el-table {
  margin-bottom: 10px;
}

.btn-action {
  padding: 6px 12px;
  color: #007bff;
  background: none;
  border: none;
  cursor: pointer;
}

.btn-action:hover {
  text-decoration: underline;
}

.no-data {
  text-align: center;
  color: #999;
  margin: 20px 0;
}

.filter-section {
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

button {
  background-color: #007bff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
